<template>
  <!-- 左侧菜单栏 -->
  <div class="sidebar" :class="{ collapse : isCollapse, 'has-logo': sidebarLogo}">
    <!-- 顶部描述信息 -->
    <div v-show="sidebarLogo" class="sidebar-logo">
      <transition name="logoFade">
        <div v-if="isCollapse" key="collapse" >
          <img src="~@/static/Vue.png" class="image" alt="">
        </div>
        <div v-else key="expand">
          <img src="~@/static/Vue.png" class="image" alt="">
          <h1 class="sidebar-title">{{ title }}</h1>
        </div>
      </transition>
    </div>
    <!-- 所有菜单列表 -->
    <el-scrollbar class="sidebar-menu">
      <el-menu
        class="menu"
        background-color="#304156"
        text-color="#BFCBD9"
        :active-text-color="menuActiveColor"
        :collapse="isCollapse"
        :default-active="menuActiveName || '/admin'">
        <!-- 固定菜单项 -->
        <el-menu-item index="/admin" @click="toHomePageHandle">
          <svg-icon icon-class="home" class="blog-icon" />
          <span slot="title">首页</span>
        </el-menu-item>
        <!-- 递归渲染二、三。。级菜单 -->
        <sidebar-item v-for="menu in menuTree"
                      v-if="menu.display === 0"
                      :key="menu.menuId"
                      :menu="menu" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
  import SidebarItem from "@/components/common/admin/sidebar/sidebar-item";

  export default {
    name: "admin-sidebar",
    components: {
      SidebarItem
    },
    data() {
      return {
        title: '博客管理后台',
        // 用户菜单树
        menuTree: [],
      }
    },
    computed: {
      // 左侧菜单栏是否折叠
      isCollapse() {
        return this.$store.state.settings.isCollapse;
      },
      // 是否显示logo
      sidebarLogo() {
        return this.$store.state.settings.sidebarLogo;
      },
      // 侧边菜单栏被点击菜单
      menuActiveName() {
        return this.$store.state.menu.menuActiveName;
      },
      // 侧边菜单栏文字颜色
      menuActiveColor() {
        return this.$store.state.settings.theme;
      }
    },
    created() {
      if (process.client) {
        this.getMenuTree();
      }
    },
    methods: {
      // 获取用户菜单树
      getMenuTree() {
        this.$axios.$get('/sys/menu/user/menu')
          .then(({ data }) => {
            this.menuTree = data.menuTree;
            // console.log('pageMenuList', JSON.stringify(data.pageMenuList))
            // console.log('permitList', JSON.stringify(data.permitList))
            this.$store.commit('menu/setPageMenuList', data.pageMenuList);
            this.$store.commit('menu/setPermitList', data.permitList);

            // 刷新页面，如果页面路由不是后台的首页，则添加菜单的tab
            this.addMenuTab(data.pageMenuList)
          })
      },
      /**
       * 回到‘首页事件’
       */
      toHomePageHandle() {

        this.$router.push('/admin')
      },
      /**
       * 增加顶部菜单tab方法
       * @param {Array} pageMenuList 用户关联的’页面‘菜单对象列表
       */
      addMenuTab(pageMenuList) {
        let menu = pageMenuList
          .filter(_menu => !!_menu.path)
          .filter(_menu => this.$route.path.includes(_menu.path))
          .findLast(_menu => _menu.display === 0)
        // console.log('menu=', menu, 'this.$route.path', this.$route.path)
        if (menu) {
          let obj = {
            // 菜单id
            menuId: menu.menuId,
            // 菜单路由
            path: "/" + menu.path,
            // 菜单名称
            title: menu.name,
            // 参数1
            params: {},
            // 参数2
            query: {}
          }
          this.$store.commit('menu/addMenuTabOnMiss', obj)
        }
      }
    }
  }
</script>

<style>
.sidebar {
  transition: width .28s;
  width: 210px;
  height: 100%;
  position: fixed;
  font-size: 0;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
}
.collapse {
  width: 54px;
}
/* logo图片动画 */
.logoFade-enter-active {
  transition: opacity 1.5s;
}

.logoFade-enter, .logoFade-leave-to {
  opacity: 0;
}
.sidebar .sidebar-logo {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: rgb(48,65,86);
  text-align: center;
  overflow: hidden;
  display: inline-block;
}
.sidebar.collapse .sidebar-logo .image {
  margin-right: 0;
}
.sidebar .sidebar-logo .image {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  vertical-align: middle;
  transition: margin-right .28s;
}
.sidebar .sidebar-logo .sidebar-title {
  display: inline-block;
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: 50px;
  font-size: 15px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  vertical-align: middle;
}
.sidebar.has-logo .sidebar-menu {
  height: calc(100% - 50px);
}
.sidebar .sidebar-menu {
  height: 100%;
}
.sidebar .menu {
  min-height: 100vh;
  width: 100% !important;
}
.sidebar.has-logo .menu {
  min-height: calc(100vh - 50px);
}
</style>

<style scoped>
/deep/ .is-horizontal {
  display: none;
}
/deep/ .is-vertical {
  right: 0;
}
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden !important;
  margin-right: -19px !important;
}
/deep/ .el-menu-item {
  min-width: 100% !important;
}
</style>
